<template>
	<view class="audio">
		<view class="jindu">
			<van-progress :percentage="jindu" />
			<!-- <van-button @touchstart="touchStart" @touchend="touchEnd">录音</van-button> -->
		</view>
		<view class="btn">
			<view class="loading" v-if="desc">
				<van-loading type="spinner" color="#1989fa">正在录音中...</van-loading>
			</view>
			<view class="txt" v-else>
				请点击图标开始录音!
			</view>
			<view class="luyin" @touchstart="touchStart" @touchend="touchEnd">
				<text class="iconfont" :class="{'icon-yuyin1': !desc,'icon-yuyin':desc, 'blue':!desc, 'green':desc}" ></text>
			</view>
			<button type="warn" v-if="done" @click="audioPlay">播放</button>
			<button :type="done ? 'primary':'' "  @click="goBack">{{ done ? '确定' : '返回'}}</button>
		</view>
	</view>
</template>

<script>
	const voiceReciver = uni.getRecorderManager();
	const voicePlayer = uni.createInnerAudioContext()
	// const myaudio = wx.createInnerAudioContext({});
	export default {
		data() {
			return {
				jindu: 0,
				done: false,
				timer: "",
				desc: false,
			}
		},
		onShow() {
			this.getAuth()
		},
		methods: {
			// 录音权限
			getAuth() {
				uni.getSetting({
					success(res) {
						console.log(res.authSetting['scope.record']);
						let isrecode = res.authSetting['scope.record']
						if(!isrecode) {
							uni.authorize({
								scope:"scope.record",
								success(val) {
									console.log("已获取录音权限");
								},
							})
						}
					},
				})
			},
			// 开始录音
			touchStart() {
			    console.log('开始');
				this.desc = true
				this.numTotal()
			    let option = {
			      duration: 10000, //录音的时长，之前最大值好像只有1分钟，现在最长可以录音10分钟
			      format: 'mp3', //录音的格式，有aac和mp3两种   
			    }
			    voiceReciver.start(option); //开始录音   这么写的话，之后录音得到的数据，就是你上面写得数据。
			    voiceReciver.onStart(() => {
			      console.log('录音开始事件') //这个方法是录音开始事件，你可以写录音开始的时候图片或者页面的变化
				 
			    })
			
			  },
			  // 录音结束
			  touchEnd() {
			      console.log('结束')
				  let self = this
				  this.desc = false
				  clearInterval(this.timer)
				  this.jindu = 0
			      voiceReciver.stop();
			      voiceReciver.onStop((res) => {
					  
			        console.log(res) //这里是必须写完成事件的，因为最后的文件，就在这里面；
			        let time = parseInt(res.duration / 1000);
			        voicePlayer.src = res.tempFilePath
					this.done = true
					self.$store.commit("getMsgAudio", res.tempFilePath)
					
			      })
			  
			    },
				audioPlay() {
					voicePlayer.play()
				},
				numTotal() {
					
					this.timer = setInterval(() => {
						this.jindu ++
						if(this.jindu >= 100) {
							this.touchEnd()
							this.jindu = 0
							clearInterval(this.timer)
						}
					}, 1000)
				},
				goBack() {
					uni.navigateTo({
						url:"/pages/createOrder/createOrder"
					})
					let self = this
					
				},
		}
	}
</script>

<style scoped lang="scss">
	.audio {
		width: 100%;
		padding: 20rpx 50rpx;
		box-sizing: border-box;
		text-align: center;
		.jindu {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			text-align: center;
		}
		.btn {
			padding-top: 20%;
			text-align: center;
			.luyin {
				margin-top: 60rpx;
				.iconfont {
					font-size: 300rpx;
					color: #007AFF;
					transition: all 0.3s linear ;
				}
				.blue {
					color: #007AFF;
				}
				.green {
					color: green;
				}
			}
			button {
				margin: 20rpx 0;
			}
		}
	}
</style>
